<template>
  <div class="main-container"
       ref="container">
    <skeleton :show="false"
              :list="indexSkeleton"></skeleton>
    <van-nav-bar class="wei-header main-header van-nav-bar_line van-nav-bar_normal"
                 :class="{'is-active':searchFlag}">

      <!-- <div class="logo"
           v-if="searchFlag"
           slot="left">
        <img src="../../assets/img/logo.png"
             alt="">
      </div> -->

      <span slot="title"
            v-text="community.communityName"></span>
      <!-- <van-icon name="tixing"
                slot="right" /> -->
    </van-nav-bar>
    <van-swipe :autoplay="3000"
               class="main-banner">
      <van-swipe-item v-for="(image, index) in banner"
                      :key="index">
        <img v-lazy="image?`${image.includes('://')?image:`${imagesUrl}/${image}`}`:''"
             class="img" />
      </van-swipe-item>
    </van-swipe>
    <van-row class="main-menu">
      <van-col span="12"
               v-for="(item,index) in menu"
               :key="index">
        <div class="menu-item"
             @click="goPage(item.href,'',item.query)">
          <van-icon :name="item.icon"
                    :color="item.color"
                    :style="{ marginTop: `-${item.top}px`}" />
          <div class="menu-right">
            <p class="item-title">{{item.title}}</p>
            <small class="item-subtitle">{{item.subtitle}}</small>
          </div>
        </div>
      </van-col>
    </van-row>
    <div class="main-news">
      <div class="box">
        <van-icon name="xinwen" />
        <div class="list">
          <p class="name ">通知公告</p>
          <div class="menu"
               v-if="newsFlag">
            <div class="item"
                 :style="{ top:newsTop }"
                 v-for="(item,index) in news"
                 :key="index"
                 @click="goPage('/notice/detail','',{id:item.id})">
              <p class="title">{{item.title}}</p>
              <small class="datetime"
                     v-html="item.createDate"></small>
            </div>
          </div>
          <span class="avue-tip"
                v-else>暂时没有公告</span>
          <div class="more"
               @click="goPage('/index/life','',{type:1})">更多...</div>
        </div>
      </div>
    </div>
    <div class="main-huodong">
      <div class="header">
        <van-icon name="tuangou" />
        <span class="title">团购活动</span>
      </div>
      <van-swipe>
        <van-swipe-item v-for="(image, index) in huodongList"
                        :key="index">
          <a :href="image.href || '#'">
            <img v-lazy="image.img"
                 class="list" />
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import { getMenu, getNews, getBanner, getCommunity, getHuodong } from '@/api/common';
import baseCommon from '@/mixins/common.js';
import skeleton from '@/components/skeleton/main';
import { mapGetters } from 'vuex';
import indexSkeleton from './indexSkeleton';
import Bus from '@/util/bus.js';

export default {
  name: 'main',
  mixins: [baseCommon()],
  components: {
    skeleton,
  },
  data() {
    return {
      indexSkeleton,
      skeletonShow: true,
      searchFlag: false,
      active: '',
      count: 0,
      isLoading: false,
      newsActive: 0,
      news: [],
      menu: [],
      huodongList: [],
      banner: [],
    };
  },
  created() {
    Bus.$on('refershIndex', () => {
      this.init();
    });
  },
  mounted() {
    this.scrollNews();
    this.handlemousewheel();
    this.init();
  },
  activated() { },
  computed: {
    newsFlag() {
      return this.news.length !== 0;
    },
    newsTop() {
      return `${-this.newsActive * 1.75}rem`;
    },
    ...mapGetters(['userInfo', 'community']),
  },
  methods: {
    init() {
      // 获取菜单和物业信息
      getMenu().then((res) => {
        const data = res.data.data;
        this.menu = data;
        this.skeletonShow = false;
        return getCommunity(this.community.communityId);
      }).then((res) => {
        const data = res.data;
        const phone = data.telphone || data.phone || '';
        this.menu[1].href = phone ? `tel:${phone}` : '';
      });
      // 获取咨询
      getNews({
        communityId: this.community.communityId,
        page: 1,
        limit: 5,
        type: 0,
      }).then((res) => {
        const data = res.data;
        this.news = data.records;
      });
      // 获取滚动图
      const imgList = new Array(3).fill('http://oetrwxnhv.bkt.clouddn.com/banner1.png');
      getBanner(this.community.communityId).then((res) => {
        const data = res.data;
        const obj = data.obj;
        this.banner = obj || imgList;
      }).catch(() => {
        this.banner = imgList;
      });
      // 获取活动
      getHuodong().then((res) => {
        const data = res.data.data;
        this.huodongList = data;
      });
    },
    scrollNews() {
      setInterval(() => {
        if (this.newsActive < this.news.length - 1) {
          this.newsActive += 1;
        } else {
          this.newsActive = 0;
        }
      }, 3000);
    },
    handleSearch() {
      if (!this.searchFlag) {
        this.searchFlag = true;
      } else {
        this.$toast('搜索成功');
      }
    },
    handlemousewheel(e) {
      const cotainer = this.$refs.container;
      cotainer.onscroll = (e) => {
        const scrollTop = cotainer.scrollTop;
        if (scrollTop >= 50) {
          this.searchFlag = true;
        } else {
          this.searchFlag = false;
        }
      };
    },
    onRefresh() {
      setTimeout(() => {
        this.$message.success({
          message: '刷新成功',
          duration: 1500,
        });
        this.isLoading = false;
        this.count++;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.main-container {
  padding-bottom: 60px;
  .avue-tip {
    padding: 30px 0;
    padding-right: 50px;
  }
}
//头部
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  background-color: rgba($color: #fff, $alpha: 0);
  &::after {
    border: none !important;
  }

  .van-nav-bar__title {
    font-size: 14px !important;
  }
  i {
    color: #fff;
    font-size: 22px;
  }
  .van-nav-bar__right {
    i {
      margin-top: -5px;
    }
  }
}
//banner
.main-banner {
  padding: 0;
  height: 200px;
  .img {
    width: 100%;
  }
}
.main-menu {
  padding: 3px 1.5px;
  a {
    text-decoration: none;
  }
  //菜单
  .menu-item {
    margin: 2.5px;
    padding: 28px 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-radius: 12px;
    background-color: #fff;
    i {
      margin-right: 12px;
      font-size: 42px;
    }
    .item-title {
      margin-bottom: 15px;
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }
    .item-subtitle {
      margin-bottom: 15px;
      font-size: 12px;
      color: #b3b8bc;
    }
  }
}

//新闻
.main-news {
  $color: #ef5b26;
  padding: 15px 27px 8px 27px;
  background-color: #fff;
  .box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #e6e6e6;
  }
  .list {
    width: calc(100% - 50px);
  }
  .menu {
    height: 50px;
    overflow: hidden;
  }
  i {
    margin-top: -6px;
    margin-right: 12px;
    color: $color;
    font-size: 36px;
  }
  .name {
    margin-bottom: 14px;
    color: $color;
    font-size: 16px;
  }
  .item {
    margin-bottom: 15px;
    position: relative;
    color: #333;
    text-decoration: none;
    transition: top 0.5s;
    display: block;
    a {
      color: #333;
      text-decoration: none;
    }
    .title {
      width: 70%;
      margin-bottom: 10px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 20px;
    }
    .datetime {
      color: #ccc;
      font-size: 12px;
    }
  }

  .more {
    margin-bottom: 10px;
    color: #b3b8bc;
    font-size: 14px;
    text-align: right;
  }
}
//活动
.main-huodong {
  padding: 0 28px 10px 28px;
  box-sizing: border-box;
  background-color: #fff;
  $color: #fe5277;
  .header {
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    height: 40px;
    color: $color;
    overflow: hidden;
    .title {
      font-size: 16px;
    }
    i {
      margin-right: 14px;
      font-size: 30px;
    }
  }
  .list {
    margin-top: 10px;
    width: 100%;
  }
}
</style>

